<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>

</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                data: []
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: []
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: []
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: []
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                data: []
            }
        ]
    });
    $.get('multiline.json').done(function (data) {
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                name: '邮件营销',
                data: data.series[0].data
            },
                {
                    name: '联盟广告',
                    data: data.series[1].data
                },
                {
                    name: '视频广告',
                    data: data.series[2].data
                },
                {
                    name: '直接访问',
                    data: data.series[3].data
                },
                {
                    name: '搜索引擎',
                    data: data.series[4].data
                }
            ]

        })
        //console.log(data.data);
    })

</script>
</body>
</html>
